<template>
  <div class="project-showcase">
    <app-header 
      :title="projectTitle" 
      :nav-items="navItems" 
    />
    
    <hero-section 
      :title="heroContent.title" 
      :subtitle="heroContent.subtitle"
      :primary-button="heroContent.primaryButton"
      :secondary-button="heroContent.secondaryButton"
    />
    
    <overview-section 
      :title="overviewContent.title" 
      :content="overviewContent.paragraphs" 
    />
    
    <features-section 
      :title="featuresContent.title" 
      :features="features" 
    />
    
    <tech-stack-section 
      :title="techStackContent.title" 
      :tech-stack="techStack" 
    />
    
    <team-section 
      :title="teamContent.title" 
      :members="teamMembers" 
    />
    
    <contact-section 
      :title="contactContent.title"
      :info="contactContent.info"
      :submit-text="contactContent.submitText"
      @submit="handleContactSubmit"
    />
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import HeroSection from '@/components/HeroSection.vue'
import OverviewSection from '@/components/OverviewSection.vue'
import FeaturesSection from '@/components/FeaturesSection.vue'
import TechStackSection from '@/components/TechStackSection.vue'
import TeamSection from '@/components/TeamSection.vue'
import ContactSection from '@/components/ContactSection.vue'

export default {
  name: 'App',
  components: {
    AppHeader,
    HeroSection,
    OverviewSection,
    FeaturesSection,
    TechStackSection,
    TeamSection,
    ContactSection
  },
  data() {
    return {
      projectTitle: '项目名称',
      navItems: [
        { text: '概述', href: '#overview' },
        { text: '特点', href: '#features' },
        { text: '技术栈', href: '#tech-stack' },
        { text: '团队', href: '#team' },
        { text: '联系我们', href: '#contact' }
      ],
      
      // 英雄区域数据
      heroContent: {
        title: '创新项目名称',
        subtitle: '一句简短的项目描述，突出项目的核心价值',
        primaryButton: { 
          text: '开始使用',
          action: () => console.log('开始使用按钮点击')
        },
        secondaryButton: { 
          text: '了解更多',
          action: () => console.log('了解更多按钮点击')
        }
      },
      
      // 概述区域数据
      overviewContent: {
        title: '项目概述',
        paragraphs: [
          '详细描述项目的背景、目标和解决的问题。这里可以介绍项目的起源、开发的动机以及项目的定位和目标受众等信息。',
          '项目概述应该清晰地传达项目的核心价值主张，让访问者能够快速理解项目的意义和用途。'
        ]
      },
      
      // 特点区域数据
      featuresContent: {
        title: '核心特点',
      },
      features: [
        {
          title: '高性能',
          description: '优化的性能确保应用快速响应，提供出色的用户体验。'
        },
        {
          title: '安全可靠',
          description: '采用先进的安全措施，保护用户数据安全。'
        },
        {
          title: '可定制',
          description: '灵活的配置选项，让您根据需求自定义应用。'
        },
        {
          title: '响应式设计',
          description: '完美适配各种设备，从桌面到移动设备的一致体验。'
        }
      ],
      
      // 技术栈区域数据
      techStackContent: {
        title: '技术栈',
      },
      techStack: [
        { name: 'Vue.js' },
        { name: 'JavaScript' },
        { name: 'CSS3' },
        { name: 'HTML5' }
      ],
      
      // 团队区域数据
      teamContent: {
        title: '我们的团队',
      },
      teamMembers: [
        {
          name: '张三',
          role: '项目负责人',
          bio: '拥有10年开发经验，专注于Web应用开发。'
        },
        {
          name: '李四',
          role: '前端开发',
          bio: 'UI/UX专家，热衷于创建优美的用户界面。'
        }
      ],
      
      // 联系区域数据
      contactContent: {
        title: '联系我们',
        submitText: '发送消息',
        info: {
          heading: '有任何问题？',
          description: '我们非常乐意听取您的反馈和建议，或者回答您关于项目的任何问题。',
          methods: [
            { icon: '✉', value: 'email@example.com' },
            { icon: '☎', value: '+1 234 567 890' }
          ]
        }
      }
    }
  },
  methods: {
    handleContactSubmit(formData) {
      console.log('表单提交', formData);
      alert('感谢您的留言！我们会尽快回复。');
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
</style>
